<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监控日志</title>
  <script type="text/javascript" type='module' charset="UTF-8" src="/js/collection.js"></script>
</head>

<body>
  <div id="app" class="flow">
    <vxe-grid v-bind="gridOptions" style="height:auto;">
      <template #toolbar_tools>
        <el-button @click="handleSearch">查询</el-button>
      </template>
      <template #toolbar_buttons>
        <el-input style="width: 250px;margin-right: 15px;" v-model="flowParams.keyWords" placeholder="请输入单位编码或者单位名称" clearable></el-input>
        <el-input style="width: 250px;margin-right: 15px;" v-model="flowParams.bankcode" placeholder="请输入银行账户" clearable></el-input>
        <el-input style="width: 250px" v-model="flowParams.flowcode" placeholder="请输入流水号" clearable></el-input>
        <el-select v-model="flowParams.state" style="margin: 0 15px; width: 100px" placeholder="请选择">
          <el-option v-for="item in flowOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </template>
      <template #operation="{ row }">
        <div>
          <el-button type="primary" link @click.stop="handleOperation(row)">查看附件列表
          </el-button>
        </div>
      </template>
    </vxe-grid>
  </div>
</body>
<script type="module">
  const { createApp, ref, reactive } = Vue
  createApp({
    setup() {
      const defaultParams = {
        keyWords: undefined,
        bankcode: undefined,
        flowcode: undefined,
        state:0
      }
      const flowParams = reactive({
        ...defaultParams
      })
      const flowOptions = ref([
        {
          label: '全部',
          value: 0
        },
        {
          label: '收入',
          value: 1
        },
        {
          label: '支出',
          value: 2
        }
      ])
      const gridOptions = reactive({
        border: true,
        align: null,
        height: 'auto',
        columnConfig: {
          resizable: true
        },
        toolbarConfig: {
          slots: {
            buttons: 'toolbar_buttons',
            tools: 'toolbar_tools'
          }
        },
        // 通用分页配置
        pagerConfig: {
          layouts: ['Sizes', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
          border: true,
          pageSize: 20,
          pageSizes: [20, 50, 100, 200],
          background: true,
        },
        rowConfig: {
          // 当鼠标移到行时，是否要高亮当前行
          isHover: true,
          // 当鼠标点击行时，是否要高亮当前行
          isCurrent: true
        },
        columns: [
          { type: 'seq', width: 50, align: "center", fixed: "left", },
          { field: 'name', title: '流水号', align: "center", width: 150 },
          { field: 'sex', title: '银行账号', align: "center", width: 150 },
          { field: 'address', title: '账户名称', align: "center", width: 150 },
          { field: 'name', title: '交易凭证号', align: "center", width: 150 },
          { field: 'sex', title: '开户行编码', align: "center", width: 150 },
          { field: 'address', title: '开户行名称', align: "center", width: 150 },
          { field: 'address', title: '交易时间', align: "center", width: 150 },
          { field: 'address', title: '交易金额', align: "center", width: 150 },
          { field: 'address', title: '账户余额', align: "center", width: 150 },
          { field: 'name', title: '对方账户', align: "center", width: 150 },
          { field: 'sex', title: '对方户名', align: "center", width: 150 },
          { field: 'address', title: '对方开户行', align: "center", width: 150 },
          { field: 'address', title: '收支类型', align: "center", width: 150 },
          { field: 'address', title: '用途', align: "center", width: 150 },
          { field: 'address', title: '上报时间', align: "center", width: 150 },
          { field: 'address', title: '操作', width: 130, fixed: "right", align: "center", slots: { default: "operation" } }
        ],
        data: [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
        ]
      })
      // 搜索
      const handleSearch = () => {
      }
      return {
        flowOptions,
        flowParams,
        gridOptions,
        handleSearch,
      }
    }
  }).use(ElementPlus).use(VXETable).mount('#app')
</script>
<style>
  .flow {
    height: 100%;
  }
</style>

</html>